<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="tfn" uri="http://www.totoro.com/functions" %>
<html>
<head>
    <title>Title</title>
    <style>
        .add-fav-msg .result {
            margin-bottom: 10px;
            padding-bottom: 10px;
        }

        #PopupFavorForm{
            padding: 20px 10px 25px 40px;
        }

        .add-fav-msg .result {
            font-size: 12px;
            color: grey;
            line-height: 20px;
        }

        .grid {
            letter-spacing: -.31em;
            word-spacing: -.43em;
        }

        .grid .g-u {
            vertical-align: middle;
        }

        .add-fav-msg .result .icon {
            width: 26px;
            height: 26px;
            background: url(//img.alicdn.com/tps/i4/T1jJe7FdpXXXb1xjju-26-161.png) no-repeat 0 0;
            background-position-x: 0px;
            background-position-y: 0px;
            padding: 0;
            margin-right: 22px;
        }

        .add-fav-msg .result .warm {
            background-position: -1px -68px;
        }

        .grid .g-u {
            display: inline-block;
            letter-spacing: normal;
            word-spacing: normal;
        }

        .grid .g-u .msg {
            margin: 0;
        }

        .add-fav-msg .result .msg {
            color: #404040;
            line-height: 16px;
            font-size: 14px;
            font-weight: 400;
            display: inline-block;
        }

        .add-item-msg {
            padding-left: 40px;
            width: 310px;
            height: 90px;
        }

        a.img {
            background-color: #FFF;
            border: 1px solid #CCC;
            height: 80px;
            text-align: center;
            vertical-align: middle;
            width: 80px;
            display: inline-block;
            float: left;
            margin-right: 10px;
            overflow: hidden;
        }

        a.img img {
            vertical-align: middle;
            height: 80px;
        }

        .info {
            overflow: hidden;
            zoom: 1;
        }

        .info .title {
            width: 190px;
            max-height: 38px;
            overflow: hidden;
        }

        .add-item-msg .info .title a, .add-item-msg .info .title a:visited {
            word-wrap: break-word;
            word-break: break-all;
            text-decoration: none;
            color: #36c;
        }

        .seller a {
            color: #555;
        }

        .ww-light {
            overflow: hidden;
        }

        .ww-large a {
            width: 67px;
        }
        .ww-light a {
            background-image: url("//gtms01.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif");
            background-image: -webkit-image-set(url("//gtms01.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("//gtms04.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
            text-decoration: none !important;
            height: 20px;
        }

        .ww-light a span {
            display: none;
        }

        .btns {
            padding-left: 40px;
            margin-top: 6px;
            height: 30px;
        }

        .btns button {
            width: 74px;
            height: 27px;
            text-align: center;
            background: url(//img.alicdn.com/tps/i3/T1IIjnXlVuXXa0H3bn-74-28.png) 0 0 no-repeat transparent;
            vertical-align: middle;
            margin-right: 10px;
            cursor: pointer;
            border: none;
            overflow: hidden;
            display: inline-block;
            padding: 0;
        }

        .ks-dialog-focused {
            position: absolute;
            z-index: 999999;
            border: 1px solid #b2d1ff;
            padding: 1px;
            background: #F1F9FB;
            overflow: hidden;
            -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,.2);
        }

        .ww-inline {
            display: inline-block;
            vertical-align: text-bottom;
        }
        .box {
            position: relative;
            margin-bottom: 10px;
        }
        .addclass-btn:hover, .addclass-btn:hover span {
            color: #f40;
        }
    </style>
</head>
<body>
<div id="J_ShopPromtion"><!-- --></div>
<div id="bd" style="overflow:hidden; width: 1190px">
    <div class="grid-s5m0 tm-clear" style="overflow: hidden; position: relative;">
        <div class="col-main tm-clear">
            <div id="mainwrap" class="main-wrap" role="main">
                <div id="J_TabBarBox" style="width: 788px;">
                    <ul id="J_TabBar" class="tabbar tm-clear">
                        <li id="product_info_status" tabindex="0" role="tab" class="tm-selected" aria-selected="true">
                            <a tabindex="-1" rel="nofollow" hidefocus="true" data-index="0">商品详情</a>
                        </li>
                        <li id="comment_status">
                            <a tabindex="-1" rel="nofollow" hidefocus="true" data-index="1" id="cssa">
                                累计评价
                                <em class="J_ReviewsCount" style="display: inline;">${product.commentCount}</em>
                            </a>
                        </li>
                        <li class="tm-qrcode-icon" id="phone_buy">
                            <a class="tm-qr-togger">手机购买</a>
                            <img class="tm-qrcode-pic"
                                 src="//gcodex.alicdn.com/qrcode.do?biz_code=tmallpc&amp;content=https%3A%2F%2Fpages.tmall.com%2Fwow%2Fmit%2Fact%2Fdownload%3Ftype%3Ddetail%26iframe%3D1%26key%3D624839602062%26src%3Dpcdetail%26mmstat%3Ddetail_pctab%26biz%3Dtmall%26dl_redirect%3Dhttps%253A%252F%252Fdetail.tmall.com%252Fitem.htm%253Fid%253D624839602062&amp;size=175&amp;margin=0&amp;logo_url=http%3A%2F%2Fimg.alicdn.com%2Ftfs%2FTB1xrwucwMPMeJjy1XcXXXpppXa-198-198.png&amp;channel_id=1"
                                 style="display: none;"></li>
                    </ul>
                </div>
                <div class="tabbar-bg" style="display: none"></div>
                <div style="height:0;margin-top:0;margin-bottom:0;overflow:hidden;width: 790px; display: block"></div>
                <div id="type-content">

                    <!-- product-info-page start -->
                    <jsp:include page="detail.jsp"></jsp:include>
                    <!-- product-info-page end -->

                    <!-- comment detail start -->
                    <div id="J_Detail">
                        <!--新首发使用详情 -->
                        <!--专业评测-->
                        <div id="J_Reviews" class="J_DetailSection">
                            <h4 class="hd" style="display: block" id="cumulativeEvaluation">
                                累计评价
                                <em class="J_ReviewsCount" style="display: inline">80</em>
                            </h4>

                            <!-- comment start -->
                            <jsp:include page="comment.jsp"></jsp:include>
                            <!-- comment end -->

                        </div>

                        <!-- 猜你喜欢 开始 -->

                        <jsp:include page="/public_page/your_like.jsp"></jsp:include>

                        <!-- 猜你喜欢 结束 -->

                        <!-- 安全提示 内容声明 开始-->

                        <div id="official-remind" class="j-mdv">
                            <dl class="tb-secu">
                                <dt>安全提示：</dt>
                                <dd>
                                    <p>请勿随意接收任何来源不明的文件，请勿随意点击任何来源不明的链接。涉及资金往来的事项请务必仔细核对资金往来信息。 天猫不会以订单有问题，让您提供任何银行卡、密码、手机验证码！遇到可疑情况可在钱盾“诈骗举报”中进行举报,
                                        <a href="//qd.alibaba.com/go/v/pcdetail" target="_blank">安全推荐</a>
                                    </p>
                                    <p class="tm-secu clearfix">
                                        <em>推荐安全软件：</em>
                                        <a href="http://qd.alibaba.com/?tracelog=detail" target="_blank">
                                            <span class="tm-secu-qd">钱盾</span>
                                        </a>
                                        <a href="http://www.uc.cn/" target="_blank">
                                            <span class="tm-secu-uc">UC浏览器</span>
                                        </a>
                                    </p>
                                </dd>
                            </dl>
                            <dl class="tb-exemption">
                                <dt>内容声明：</dt>
                                <dd>天猫为第三方交易平台及互联网信息服务提供者，天猫（含网站、客户端等）所展示的商品/服务的标题、价格、详情等信息内容系由店铺经营者发布，其真实性、准确性和合法性均由店铺经营者负责。天猫提醒用户购买商品/服务前注意谨慎核实。如用户对商品/服务的标题、价格、详情等任何信息有任何疑问的，请在购买前通过阿里旺旺与店铺经营者沟通确认；天猫存在海量店铺，如用户发现店铺内有任何违法/侵权信息，请立即向天猫举报并提供有效线索。</dd>
                            </dl>
                        </div>

                        <!-- 安全提示 内容声明 结束-->
                    </div>

                    <!-- comment detail end -->
                </div>
            </div>
        </div>

        <!-- 左边店铺信息功能 开始 -->
        <!-- 店铺介绍 开始 -->

        <div class="col-sub">
            <div id="J_DcShopArchive" class="J_DcAsyn">
                <div id="side-shop-info">
                    <div class="shop-intro">
                        <h3 class="hd">
                            <div class="name">
                                <a class="shopLink" href="店铺" target="_blank">${shop.shopName}</a>
                                <span class="ww-light ww-small">
                                    <a style="position: relative;top: 4px;" class="ww-inline ww-online chat" data-to-uid="${shop.slid}"
                                       title="点此可以直接和卖家交流选好的宝贝，或相互交流网购体验，还支持语音视频噢。">
                                    </a>
                                </span>
                            </div>
                            <i></i>
                        </h3>
                        <div id="hovert" style="position: relative;top: -10px;padding-top: 10px;">
                        <div class="shop-cert shop-ages">
                            <span class="icon">${tfn:calculateDataGap(shop.createTime, "year")}</span>
                            <div class="text">天猫${tfn:calculateDataGap(shop.createTime, "year")}年店</div>
                        </div>
                        <div class="main-info">
                            <div class="shopdsr-item">
                                <div class="shopdsr-title">描 述</div>
                                <div class="shopdsr-score shopdsr-score-equal-ctrl">
                                    <span class="shopdsr-score-con">${babyStar}</span>
                                    <s class="shopdsr-score-equal"></s>
                                </div>
                            </div>

                            <div class="shopdsr-item">
                                <div class="shopdsr-title">服 务</div>
                                <div class="shopdsr-score shopdsr-score-equal-ctrl">
                                    <span class="shopdsr-score-con">${sellerStar}</span>
                                    <s class="shopdsr-score-equal"></s>
                                </div>
                            </div>

                            <div class="shopdsr-item">
                                <div class="shopdsr-title">物 流</div>
                                <div class="shopdsr-score shopdsr-score-equal-ctrl">
                                    <span class="shopdsr-score-con">${logisticsStar}</span>
                                    <s class="shopdsr-score-equal"></s>
                                </div>
                            </div>
                            <a target="_blank" href="//rate.taobao.com/user-rate-UvCNLOmQGMm8GMNTT.htm"
                               style="z-index: 1;display: block; position: absolute; width: 100%;height: 100%;"></a>
                        </div>
                        <div class="btnArea">
                            <a href="/shop/view_shop.htm?brandId=${shop.id}" target="_blank"
                                                class="enterShop">进店逛逛</a>
                            <a id="xshop_collection_href" class="J_PopupTrigger collection xshop_sc J_TDialogTrigger J_TokenSign favShop"
                               data-width="440" data-height="260" data-closebtn="true">收藏店铺</a>
                        </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 店铺介绍 结束 -->

            <!-- 店铺搜索 开始 -->
            <div id="J_DcLeft" class="J_DcAsyn tb-shop">
                <jsp:include page="../shop/contain/left_ui.jsp"></jsp:include>
            </div>
            <!-- 店铺搜索 结束 -->
        </div>


        <!-- 左边店铺信息功能 结束 -->
        <!-- 右边类似商品 开始 -->
        <div class="col-extra tm-bd-side" style="display: none">
            <div class="tm-Right-Recommend">
                <div class="inner">
                    <div class="ald-hd"><s></s><span class="recommendTitle"
                                                     data-spm-anchor-id="a220o.1000855.0.i9.58d1476aTusXD9">本店同类好评商品</span>
                    </div>
                    <ul class="ald-content">
                        <c:forEach items="${goodProducts}" var="product">
                            <li>
                                <div class="act">
                                    <div class="img"><a
                                            href="/buy.htm?pid=${product.id}"
                                            target="_blank">
                                        <img src="${product.productImages.get(0).imagePath}" class="img-ks-lazyload">
                                    </a>
                                        <p class="look_price">¥${tfn:formatNumber(product.nowPrice, 2)}</p></div>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 右边类似商品 结束 -->
    </div>
</div>
<!-- 固定定位的加入购物车 -->
<a class="tm-floatcart-link" style="visibility: hidden; left: 1346.5px; top: 0px;" href="javascript:;">
    <i class="iconfont icon-gouwuche_"></i>
    <span>加入购物车</span>
</a>
<div id="popupPanel" class="ks-dialog-focused ks-overlay-focused" style="display: none; left: 729.5px; top: 316.9997px; position: fixed" data-sid="${shop.id}">
<a class="close-btn" href="javascript:void(0)" style="position: absolute; top: 5px; right: 4px; outline: none;display: block; width: 15px; height: 15px; background: url(//assets.alicdn.com/app/tc/img/close_btn.png) no-repeat; text-decoration: none; text-indent: -99999px">X</a>
<div id="PopupFavorForm" name="addCollection">
<c:if test="${isCollectShop}">
    <div id="J_AddFav" class="add-fav J_FavList">
        <div class="add-fav-msg msg-day">
            <div class="result grid">
                <span class="icon g-u warm"></span>
                <div class="g-u msg-div">
                    <p class="msg">已经<a href="/shop_collect_list.htm" target="_blank">收藏</a>过此店铺 ！</p>
                </div>
            </div>
        </div>
        <div class="fav-recommend gird">
            <div class="fav-recommend-store" style="height: 100px; padding: 40px 0px 0px 0px; font-size: 14px; color: rgb(153, 153, 153);"><div class="clearfix"><img src="//img.alicdn.com/tps/i1/T1uQMZFk0eXXbpPmPo-78-86.png" style="float: left; height: 50px; margin-right: 20px;" height="25px"><span style="margin: 15px 0px 0px;">抱歉，推荐结果加载失败。您可以到<a href="/user/shop_collect_list.htm" target="_blank">收藏夹</a>查看更多宝贝！</span></div></div>
        </div>
    </div>
</c:if>
<c:if test="${!isCollectShop}">
    <div class="add-fav-msg">
    <div class="result grid">
    <span class="icon g-u warm"></span>
    <div class="g-u">
    <input type="hidden" name="itemtype" value="0">
    <input type="hidden" name="isTmall" value="">
    <input type="hidden" name="isAlitrip" value="">
    <input type="hidden" name="isLp" value="">
    <input type="hidden" name="isTaohua" value="">
    <input type="hidden" name="id" value="397623492">
    <input type="hidden" name="_tb_token_" value="PUwH8DtVCdkLB7cfLqPu">
    <p class="msg">确认收藏该店铺？</p>
    </div>
    </div>
    </div>
    <div class="add-item-msg">
    <a href="" target="_blank" class="img">
    <img src="/static/seller/shop/${shop.shopHead}">
    </a>
    <div class="info">
    <div class="title">
    <a href="" target="_blank" title="${shop.shopName}">
    ${shop.shopName}
    </a>
    </div>
    <div class="seller">
    <span class="name">
    <a target="_blank" href="">${shop.shopName}</a>
    </span>
    <span class="ww-light ww-large">
    <a target="_blank" class="ww-inline ww-online" title="点此可以直接和卖家交流选好的宝贝，或相互交流网购体验，还支持语音视频噢。" data-to-uid="${shop.slid}">
    <span>旺旺在线</span></a></span>
    </div>
    <div class="credit-rank">
    <a target="_blank" href="">
    </a>
    </div>
    </div>
    </div>
    <p class="btns">
    <button type="submit" class="bt-submit"></button>
    </p>
    </div>
    </c:if>
</div>
</body>
    <script>
    var $height = 0;
    // 当鼠标滑倒一定位置，触发元素
    window.onscroll = function (e) {
    var height = document.documentElement.scrollTop + document.body.scrollTop;
    $height = height;
    if(height>903){
    // 显示店铺栏
    $("h3.hd").addClass("hook-float").css({"position":"fixed","top":"0px","width":"184px"});
    // 显示商品详情 累计评价
    $("#J_TabBarBox").css({"position":"fixed","top":"0px"});
    $(".tabbar-bg").show().next().css("height","50px");
    // 显示加入购物车
    $(".tm-floatcart-link").css("visibility","visible");
    } if(height < 903){
    $("h3.hd").removeClass("hook-float").removeAttr("style");

    $("#J_TabBarBox").removeAttr("style").css("width","788px");
    $(".tabbar-bg").hide().next().css("height","0px");

    $(".tm-floatcart-link").css("visibility","hidden");
    }
    }

    // 固定定位店铺模块悬浮事件
    $("h3.hd").hover(function () {
    if($height>903){
    $(".shop-intro").addClass("shop-intro-float").css("width","199px");
    $(".placeholder").show();
    }
    }, function () {
    if($height>903) {
    $(".shop-intro").removeClass("shop-intro-float").removeAttr("style");
    $(".placeholder").hide();
    }
    });

    $("#hovert").mouseenter(function () {
    if($height>903) {
    $(".shop-intro").addClass("shop-intro-float").css("width", "199px");
    $(".placeholder").show();
    }
    }).mouseleave(function () {
    if($height>903) {
    $(".shop-intro").removeClass("shop-intro-float").removeAttr("style");
    $(".placeholder").hide();
    }
    })


    $(function () {
    // 手机支付悬浮伪类
    $("#phone_buy").mouseover(function () {
    $(".tm-qrcode-pic").show();
    });
    $("#phone_buy").mouseout(function () {
    $(".tm-qrcode-pic").hide();
    });

    $(".tm-qrcode-pic").mouseenter(function () {
    $(this).show();
    });
    $(".tm-qrcode-pic").mouseleave(function () {
    $(this).hide();
    });


    // 切换商品详情或是评论详情点击事件
    $("#product_info_status").click(function () {
    if ($(this).attr("class") == "tm-selected") {
    return false;
    }
    // 显示h4累计评价
    $("#cumulativeEvaluation").show();

    $("#J_Detail").hide();
    $("#product_info_content").show();
    $(this).addClass("tm-selected");
    $("#comment_status").removeClass("tm-selected");

    // 显示产品图片div
    $(".ke-post").fadeIn(500);
    // 隐藏右边相似商品
    $(".col-extra").hide();
    });

    $("#comment_status").click(function () {
    if ($(this).attr("class") == "tm-selected") {
    return false;
    }
    // 隐藏h4累计评价
    $("#cumulativeEvaluation").hide();
    // 隐藏产品多张图片大div，用来做淡出
    $(".ke-post").hide();

    $("#product_info_content").hide();
    $("#J_Detail").show();
    $(this).addClass("tm-selected");
    $("#product_info_status").removeClass("tm-selected");

    // 显示右边相似商品
    $(".col-extra").fadeIn(500);
    });

    //收藏店铺点击事件
    //点击弹出窗口
    $(".favShop").click(function (){
    $("#popupPanel").css("display","block");
    });

    $(".other").click(function (){
    $("#popupPanel").css("display","block");
    });
    $(".close-btn").click(function (){
    $("#popupPanel").css("display","none");
    });

    $(".bt-submit").click(function (){
    var sid = $(this).parents("#popupPanel").attr("data-sid");
    $("#popupPanel").css("display","none");
    $.post("/productBuy_logic/collectShop.htm", {"sid": sid}, (res)=>{
    layui.use('layer', function() {
    var layer = layui.layer;
    if(res == "success"){
    layer.open({
    title: '店铺收藏'
    , content: '收藏成功，你可以点击查看<a href="/user/shop_collect_list.htm">店铺收藏</a>'
    , offset: '300px'
    });
    } else{
    layer.open({
    title: '店铺收藏'
    , content: '收藏失败</a>'
    , offset: '300px'
    });
    }
    });
    });
    });



    });
    </script>
</html>
